<style>
	.search_all{
		/*height: 420px;*/
		width: 1000px;
		position: relative;
	    left: 50%;
	    margin-left: -500px;
	    padding-top: 15px;
	    background: #EEEEEE;
	    margin-top: 20px;
	}
	.s_money{
		font-size: 15px;
		margin-right: 25px;
	}
	#tab{
		width: 95%;
		top: -28px;
		padding-left: 5%;
	}
	.sregion_1{
		top: -7px;
		padding-left: 5%;
    	position: relative;
	}
	.tab_pane{
		padding: 8px 8px;
		margin-right: 8;
		margin-top: -20px;
	}
	.tab_pane>.recom_span{
		padding-left: 20px;
	}
	.slabe{
		font-size: 14px;
		width: 5%;
		text-align: center;
		display: inline-block;
	}
	.sl{
		font-size: 14px;
		width: 10%;
		text-align: center;
		display: inline-block;
	}
	.t_tab{
		border-bottom: 1px dashed #CCCCCC;
		height: 86px;
	}
	.s_city{
		height: 40px;
		border-bottom: 1px dashed #CCCCCC;
		margin-top: 20px;
	}
	.sregion{
		border-bottom: 1px dashed #CCCCCC;
	}
	.smoney{
		height: 48px;
		border-bottom: 1px dashed #CCCCCC;
		margin-top: 20px;
	}
	.smore{
		height: 48px;
		border-bottom: 1px dashed #CCCCCC;
		margin-top: 15px;
	}
	.sselected{
		height: 40px;
		margin-top: 15px;
	}
	.slr{
		float: right;
		padding-right: 30px;
		font-size: 15px;
	}
	.slrc{
		color: #2D8CF0;
	}
	.s_public{
		display: inline-block;
	    padding: 2px 10px;
	    font-size: 15px;
	}
	.s_public:hover{
		background: #2D8CF0;
	    display: inline-block;
	    padding: 2px 10px;
	    color: #FFFFFF;
	    cursor: pointer;
	    text-align: center;
	    border-radius: 3px;
	}
	.sselect{
		width: 140px;
		margin-right: 25px;
	}
	.addSelect{
		background: #2D8CF0;
	    display: inline-block;
	    padding: 2px 4px;
	    color: #FFFFFF;
	    cursor: pointer;
	    text-align: center;
	    border-radius: 3px;
	    font-size: 14px;
	    margin-right: 10px;
	}
</style>
<template>
	<div class="search_all">
		<div class="t_tab">
			<span class="slabe">行业:</span>
			<Tabs id="tab">
		        <Tab-pane label="互联网.游戏.软件" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="互联网.电商" @click="industy($event)">互联网.电商</span>
		        	<span class="recom_span" pay-money="网络游戏" @click="industy($event)">网络游戏</span>
		        	<span class="recom_span" pay-money="计算机软件" @click="industy($event)">计算机软件</span>
		        	<span class="recom_span" pay-money="IT服务" @click="industy($event)">IT服务</span>
		        </Tab-pane>
		        <Tab-pane label="制药.医疗" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="电子" @click="industy($event)">电子</span>
		        	<span class="recom_span" pay-money="通信工程" @click="industy($event)">通信工程</span>
		        	<span class="recom_span" pay-money="计算机硬件" @click="industy($event)">计算机硬件</span>
		        </Tab-pane>
		        <Tab-pane label="房地产.建筑.物业" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="建筑工程" @click="industy($event)">建筑工程</span>
		        	<span class="recom_span" pay-money="规划设计" @click="industy($event)">规划设计</span>
		        	<span class="recom_span" pay-money="房地产服务" @click="industy($event)">房地产服务</span>
		        </Tab-pane>
		        <Tab-pane label="金融" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="银行" @click="industy($event)">银行</span>
		        	<span class="recom_span" pay-money="保险" @click="industy($event)">保险</span>
		        	<span class="recom_span" pay-money="投资" @click="industy($event)">投资</span>
		        	<span class="recom_span" pay-money="会计/审计" @click="industy($event)">会计/审计</span>
		        	<span class="recom_span" pay-money="信托/担保/拍卖/典当" @click="industy($event)">信托/担保/拍卖/典当</span>
		        </Tab-pane>
		        <Tab-pane label="消费品" class="tab_pane">
		        	<span class="recom_span" pay-money="快消品" @click="industy($event)">快消品</span>
		        	<span class="recom_span" pay-money="批发零售" @click="industy($event)">批发零售</span>
		        	<span class="recom_span" pay-money="服装服饰" @click="industy($event)">服装服饰</span>
		        	<span class="recom_span" pay-money="家电业" @click="industy($event)">家电业</span>
		        	<span class="recom_span" pay-money="办公设备" @click="industy($event)">办公设备</span>
		        	<span class="recom_span" pay-money="奢侈品/收藏品" @click="industy($event)">奢侈品/收藏品</span>
		        	<span class="recom_span" pay-money="工艺品收藏玩具" @click="industy($event)">工艺品收藏玩具</span>
		        </Tab-pane><Tab-pane label="汽车.机械.制造" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="汽车.摩托车" @click="industy($event)">汽车.摩托车</span>
		        	<span class="recom_span" pay-money="机械制造" @click="industy($event)">机械制造</span>
		        	<span class="recom_span" pay-money="印刷包装.造纸" @click="industy($event)">印刷包装.造纸</span>
		        	<span class="recom_span" pay-money="原材料加工" @click="industy($event)">原材料加工</span>
		        	<span class="recom_span" pay-money="工业自动化" @click="industy($event)">工业自动化</span>
		        </Tab-pane>
		        <Tab-pane label="政府.农林牧渔" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="生物制药工程" @click="industy($event)">生物制药工程</span>
		        	<span class="recom_span" pay-money="医疗保健.美容" @click="industy($event)">医疗保健.美容</span>
		        	<span class="recom_span" pay-money="通信医疗器械工程" @click="industy($event)">医疗器械</span>
		        </Tab-pane>
		        <Tab-pane label="能源.化工环保" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="能源.水利" @click="industy($event)">能源.水利</span>
		        	<span class="recom_span" pay-money="化工行业" @click="industy($event)">化工行业</span>
		        	<span class="recom_span" pay-money="采掘.冶炼" @click="industy($event)">采掘.冶炼</span>
		        	<span class="recom_span" pay-money="环保行业" @click="industy($event)">环保行业</span>
		        	<span class="recom_span" pay-money="新能源" @click="industy($event)">新能源</span>
		        </Tab-pane>
		        <Tab-pane label="服务.外包.中介" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="专业咨询" @click="industy($event)">专业咨询</span>
		        	<span class="recom_span" pay-money="中介服务" @click="industy($event)">中介服务</span>
		        	<span class="recom_span" pay-money="外包服务" @click="industy($event)">外包服务</span>
		        	<span class="recom_span" pay-money="检测认证" @click="industy($event)">检测认证</span>
		        	<span class="recom_span" pay-money="旅游酒店餐饮" @click="industy($event)">旅游酒店餐饮</span>
		        	<span class="recom_span" pay-money="娱乐休闲" @click="industy($event)">娱乐休闲</span>
		        	<span class="recom_span" pay-money="租赁服务" @click="industy($event)">租赁服务</span>
		        </Tab-pane>
		        <Tab-pane label="广告.传媒.教育.文化" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="广告会展" @click="industy($event)">广告会展</span>
		        	<span class="recom_span" pay-money="影视文化" @click="industy($event)">影视文化</span>
		        	<span class="recom_span" pay-money="教育培训" @click="industy($event)">教育培训</span>
		        </Tab-pane>
		        <Tab-pane label="交通.贸易.物流" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="运输物流" @click="industy($event)">运输物流</span>
		        	<span class="recom_span" pay-money="进出口贸易" @click="industy($event)">进出口贸易</span>
		        	<span class="recom_span" pay-money="航空航天" @click="industy($event)">航空航天</span>
		        </Tab-pane>
		        <Tab-pane label="电子.通信.硬件" class="tab_pane" style="visibility: initial;">
		        	<span class="recom_span" pay-money="政府机构" @click="industy($event)">政府机构</span>
		        	<span class="recom_span" pay-money="农林牧渔" @click="industy($event)">农林牧渔</span>
		        	<span class="recom_span" pay-money="其他行业" @click="industy($event)">其他行业</span>
		        </Tab-pane>
			</Tabs>
		</div>
		<div class="s_city">
			<span class="slabe">城市:</span>
			<span  v-for="(item, index) in city">
				<span class="s_public" @click="AddCityMse(item.label)" ref="mychild">{{item.label}}</span>
			</span>
			<span class="s_public"  @click="clickParent" >其他</span>
			<SelectAddress  ref="mychild" v-on:childByValue="childByValue"></SelectAddress>
		</div>
		<div class="sregion" v-show="sregion">
			<span class="slabe" style="position: relative;top: 17px;">地区:</span>
			<div class="sregion_1">
				<span  v-for="(item, index) in region">
					<span class="s_public">{{item.name}}</span>
				</span>
			</div>
		</div>
		<div class="smoney">
			<span class="slabe">薪资:</span>
			<span  v-for="(item, index) in money">
				<span class="s_money s_public" @click="AddMoneyMse(item.money)">{{item.money}}</span>
			</span>
		</div>
		<div class="smore">
		    <span class="slabe">更多:</span>
		    <Select v-model="lable" class="sselect" placeholder="发布时间" @on-change="changeTime(lable)">
		        <Option v-for="item in STime" v-bind:value="item.value"  :key="item.value">{{item.label}}</Option>
		    </Select>
		    <Select v-model="type"  class="sselect" placeholder="职业类型" @on-change="changeType(type)">
		        <Option v-for="item in SType" :value="item.value" :key="item.value">{{ item.label }}</Option>
		    </Select>
		     <Select v-model="scale"  class="sselect" placeholder="企业规模" @on-change="changeScale(scale)">
		        <Option v-for="item in SScale" :value="item.value" :key="item.value">{{ item.label }}</Option>
		    </Select>
		     <Select v-model="nature" class="sselect"  placeholder="企业性质"  @on-change="changeNature(nature)">
		        <Option v-for="item in SNature" :value="item.value" :key="item.value">{{ item.label }}</Option>
		    </Select>
		</div>
		<div class="sselected">
		    <span class="sl">已选条件:</span>
		    <span  v-for="(item, index) in addindustyli">
				<span class="addSelect" @click="RemoveMse1(index)">{{item.industy}} X</span>
			</span>
		    <span  v-for="(item, index) in addSelect">
				<span class="addSelect" @click="RemoveMse2(index)">{{item.message}} X</span>
			</span>
			<span  v-for="(item, index) in addmoneyli">
				<span class="addSelect" @click="RemoveMse3(index)">{{item.money}} X</span>
			</span>
			<span  v-for="(item, index) in addTimeli">
				<span class="addSelect" @click="RemoveMse4(index)">{{item.time}} X</span>
			</span>
			<span  v-for="(item, index) in addTypeli">
				<span class="addSelect" @click="RemoveMse5(index)">{{item.type}} X</span>
			</span>
			<span  v-for="(item, index) in addScaleli">
				<span class="addSelect" @click="RemoveMse6(index)">{{item.scale}} X</span>
			</span>
			<span  v-for="(item, index) in addNatureli">
				<span class="addSelect" @click="RemoveMse7(index)">{{item.nature}} X</span>
			</span>
		    <span class="slr">共找到 &nbsp;<span class="slrc">1000+</span>&nbsp; 职位</span>
		</div>
	</div>
</template>

<script>
	import SelectAddress from     './SearchCom/selectAddress'
	export default {
    	name: 'Search',
    	components: {
    	    SelectAddress
		},
        data () {
            return {
            	sregion:false,
            	money:[
            	    { money: '3-5W'},
            	    { money: '5-10W'},
            	    { money: '10-20W'},
            	    { money: '20-50W'},
            	    { money: '50W以上'}
            	],
            	city:[
	            	{ label: '全国'},
	            	{ label: '北京'},
	            	{ label: '上海'},
	            	{ label: '广州'},
	            	{ label: '深圳'},
	            	{ label: '天津'},
	            	{ label: '苏州'},
	            	{ label: '重庆'},
	            	{ label: '南京'},
	            	{ label: '杭州'},
	            	{ label: '武汉'}
            	],
            	STime: [
                    {
                        value: '不限',
                        label: '不限'
                    },
                    {
                        value: '一天以内',
                        label: '一天以内'
                    },
                    {
                        value: '三天以内',
                        label: '三天以内'
                    },
                    {
                        value: '一周以内',
                        label: '一周以内'
                    },
                    {
                        value: '一个月以内',
                        label: '一个月以内'
                    }
                ],
                SType: [
                    {
                        value: '不限',
                        label: '不限'
                    },
                    {
                        value: '猎头职位',
                        label: '猎头职位'
                    },
                    {
                        value: '企业职位',
                        label: '企业职位'
                    }
                ],
                SScale: [
                    {
                        value: '1-49',
                        label: '1-49'
                    },
                    {
                        value: '50-99',
                        label: '50-99'
                    },
                    {
                        value: '100-499',
                        label: '100-499'
                    },
                    {
                        value: '500-999',
                        label: '500-999'
                    },
                    {
                        value: '1000-2000',
                        label: '1000-2000'
                    },
                    {
                        value: '2000-5000',
                        label: '2000-5000'
                    },
                    {
                        value: '5000-10000',
                        label: '5000-10000'
                    },{
                        value: '1W以上',
                        label: '1W以上'
                    }
                ],
                SNature: [
                    {
                        value: '外企/外商独资',
                        label: '外企/外商独资'
                    },
                    {
                        value: '中外合营/合资',
                        label: '中外合营/合资'
                    },
                    {
                        value: '私营/民营企业',
                        label: '私营/民营企业'
                    },
                    {
                        value: '国有企业',
                        label: '国有企业'
                    },
                    {
                        value: '上市公司',
                        label: '上市公司'
                    },
                    {
                        value: '政府/非盈利机构',
                        label: '政府/非盈利机构'
                    },
                    {
                        value: '事业单位',
                        label: '事业单位'
                    },{
                        value: '其他',
                        label: '其他'
                    }
                ],
                region:[],
            	addSelect: [],
            	addmoneyli: [],
            	addindustyli: [],
            	addTimeli: [],
            	addTypeli:[],
            	addScaleli:[],
            	addNatureli:[],
                time: '',
                type: '',
                scale: '',
                nature: '',
                cityli:{},
                moneyli:{},
                industyli:{},
                timeli:{},
                typeli:{},
                scaleli:{},
                natureli:{}
            }
        },
        methods:{
        	childByValue(data){
        		this.sregion = true
        		this.region = data
        		console.log("我是子组件传过来的值   "+this.region);
        		console.log("我是子  "+this.city)
        		
        	},
        	clickParent() {
		        this.$refs.mychild.choseAdd("嘿嘿嘿");
		    },
        	industy(){
        		var industy = event.currentTarget.getAttribute('pay-money');
        		this.industyli = {industy:industy}
        		this.addindustyli=[this.industyli]
        	},
        	AddCityMse(e){
        		this.$refs.mychild.choseAdd("嘿嘿嘿");
        		
        		this.cityli = {message:e}
        		this.addSelect=[this.cityli]
        	},
        	AddMoneyMse(e){
        		this.moneyli = {money:e}
        		this.addmoneyli=[this.moneyli]
        	},
        	changeTime(w){
				this.timeli = {time:w}
        		this.addTimeli=[this.timeli]
			},
        	changeType(w){
        		this.typeli = {type:w}
        		this.addTypeli=[this.typeli]
        	},
        	changeScale(w){
        		this.scaleli = {scale:w}
        		this.addScaleli=[this.scaleli]
        	},
        	changeNature(w){
        		this.natureli = {nature:w}
        		this.addNatureli=[this.natureli]
        	},
        	RemoveMse1(index){
		      // 用索引删除
		      this.addindustyli.splice(index, 1);
        	},
        	RemoveMse2(index){
		      // 用索引删除
		      this.addSelect.splice(index, 1);
        	},
        	RemoveMse3(index){
        		this.addmoneyli.splice(index, 1);
        	}
        },
         /*watch:{
	        cityli:{//深度监听，可监听到对象、数组的变化
	            handler(val, oldVal){
	                console.log("cityli.message: "+val.message, oldVal.message);//但是这两个值打印出来却都是一样的
	            }
	            
	        }
	    },*/
        mounted () {
        	
		}
    }
</script>
